import React, { useState } from 'react';
import { Input, Button, DatePicker } from 'antd';
import './index.styl'
import moment from 'moment';
import { useFormFunc } from "./input"

function SearchDom(props) {
  const { RangePicker } = DatePicker
  const publicFunc = new useFormFunc()

  const [searchForm, setSearchForm] = useState({})
  const changeInput = (e, key) => {
    setSearchForm(Object.assign({}, searchForm, {
      [key]: e?.target?.value || ''
    }))
  }
  const resetSearch = () => {
    setSearchForm({})
  }
  const handleSearch = () => {
    props.submitSearch(searchForm)
  }

  const ListItem = props.searchList.map(item => {
    return (<div key={item.key} className='search-item'>
      <div className='item-label'><span style={{ color: 'red' }}>{item?.required ? '*' : ''}</span>{item.label}</div>
      <div className='item-input'>
        {publicFunc.createInput(item, props)}
      </div>
    </div>
    )
    // if (item.type === 'input') {
    //   return (
    //     <div key={item.key} className='search-item'>
    //       <div className='item-label'>{item.label}</div>
    //       <div className='item-input'>
    //         <Input placeholder="请输入内容" value={searchForm[item.key]} onChange={(e) => changeInput(e, item.key)} />
    //       </div>
    //     </div>
    //   )
    // }
    // if (item.type === 'time') {
    //   return (
    //     <div key={item.key} className='search-item'>
    //       <div className='item-label'>{item.label}</div>
    //       <div className='item-input'>
    //         <RangePicker value={searchForm[item.key]} onChange={(e) => changeInput(e, item.key)} />
    //       </div>
    //     </div>
    //   )
    // }
    // if (item.type === 'select') {
    //   return (
    //     <div key={item.key} className='search-item'>
    //       <div className='item-label'>{item.label}</div>
    //       <div className='item-input'></div>
    //     </div>
    //   )
    // }
  })
  return (
    <div className='search-wrapper'>
      <div className='search-list'>
        {ListItem}
      </div>
      <div className='search-btns'>
        <Button onClick={resetSearch}>重置</Button>
        <Button onClick={handleSearch} type="primary">搜索</Button>
      </div>
    </div>
  )
}

export default SearchDom;